<template>
  <div id="Maxdiv">
    <div id="titlemax" class="max">
      <div class="layout1"></div>
      <div class="layoutMain1">
        <el-affix offset="0" @change="change">
          <ul id="BolgTitles" :class="titleBlog">
            <img :src="img" class="BlogImg">
            <router-link to="/">首页</router-link>
            <router-link to="/blog/article">博客</router-link>
            <router-link to="/blog/album">相册</router-link>
            <router-link to="/blog/message">留言板</router-link>
            <router-link to="/blog/label">标签</router-link>
            <router-link to="/blog/friend">友链</router-link>
            <router-link to="/blog/personal">个人中心</router-link>
            <router-link to="/blog/about">关于</router-link>
            <el-button style="flex: 1" type="text"></el-button>
            <el-header :class="TitkleUsername">{{ username }}</el-header>
            <el-avatar :size="40" :src="avatar" style="margin: 8px 10px" @click="Gologin"></el-avatar>
          </ul>
        </el-affix>
        <h1 style="color: white;font-size: 50px">{{ $route.name }}</h1>
        <p class="font">"梅虽逊雪三分白 雪却输梅一缕香"</p>
        <div style="display: flex">
        </div>
      </div>
      <div class="layout1"></div>
    </div>

    <div class="max">
      <div class="layout"></div>
      <div class="layoutMain">
        <router-view v-wechat-title='$route.meta.title'/>
      </div>
      <div class="layout"></div>
    </div>
    <footer class="footer">
      <p>本站已运行{{ number_of_days }}天</p>
      <p style="padding-top: 20px">Powered by Halo • Crafted with by XXG</p>
      <p>© 2021 XG</p>
      <p>桂ICP备2020009734号</p>
    </footer>
  </div>
</template>

<script>

export default {
  name: "Blog",
  data() {
    return {
      img: 'http://www.xinggaoya.com/blog/portrait/Logo.png',
      imgUrl: [
        {url: 'http://www.xinggaoya.com/blog/portrait/Logo2.png'},
        {url: 'http://www.xinggaoya.com/blog/portrait/Logo.png'},
      ],
      avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
      TitkleUsername: 'userName',
      titleBlog: 'menu',
      hoursTip: '',
      classification: false,
      autograph: '设计你的个性签名',
      userif: false,
      userif1: true,
      username: '请登录',
      input2: '',
      activeIndex: '1',
      activeIndex2: '1',
      fits: ['fill'],
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      number_of_days: 0,
    };
  },
  created() {
    this.getMycount();
    this.getMyDay();
    let message = this.$cookies.get('message');
    if (message != null) {
      this.$notify.info({
        title: '消息',
        message: message,
      });
      this.$cookies.remove('message')
    }
  },
  methods: {
    signOut() {
      localStorage.clear();
      location.reload();
    },
    Gologin() {
      this.$router.push('/blog/personal');
    },
    getMycount() {
      let self = this;
      let date = new Date();
      if (date.getHours() >= 0 && date.getHours() < 5) {
        self.hoursTip = "凌晨好夜猫子"
      } else if (date.getHours() >= 5 && date.getHours() < 10) {
        self.hoursTip = "早上好"
      } else if (date.getHours() >= 10 && date.getHours() < 14) {
        self.hoursTip = "中午好"
      } else if (date.getHours() >= 14 && date.getHours() < 18) {
        self.hoursTip = "下午好"
      } else if (date.getHours() >= 18 && date.getHours() < 24) {
        self.hoursTip = "晚上好"
      }
    },
    getMyDay() {
      var that = this;
      var s1 = '2021-05-19';//设置为你的建站时间
      s1 = new Date(s1.replace(/-/g, "/"));
      var s2 = new Date();
      var days = s2.getTime() - s1.getTime();
      that.number_of_days = parseInt(days / (1000 * 60 * 60 * 24));
    },
    change(val) {
      if (val === true) {
        this.TitkleUsername = 'userNames'
        this.titleBlog = 'menus';
        this.img = this.imgUrl[0].url;
      } else {
        this.titleBlog = 'menu';
        this.TitkleUsername = 'userName'
        this.img = this.imgUrl[1].url;
      }
    },
  },
  mounted() {
    let token = localStorage.getItem("token");
    if (token != null) {
      this.userif1 = false;
      this.userif = true;
      this.$axios.post("/user/getuser", {userToken: token}).then((res) => {
        if (res.data.success) {
          this.username = this.hoursTip + '，' + res.data.data.userName;
          this.autograph = res.data.data.userAutograph;
          this.avatar = res.data.data.userProfilePhoto;
        } else {
          this.$notify({
            title: '报告大大',
            message: '您的登录已过期，请重新登录。',
            type: 'warning'
          });
        }
      })
    }
  },
}
</script>

<style scoped>

.max {
  background: #fdfdfe;
  display: flex;
}

#titlemax {
  height: 400px;
  background-size: cover;
  background-position: top;
  background-image: url("../static/images/blog.jpeg");
}

.BlogImg {
  margin-top: 15px;
  height: 30px;
  width: 100px;
}

.layout {
  flex: 1;

}

.layout1 {
  flex: 1;
}

.layoutMain {
  position: relative;
  top: -60px;
  min-height: 1000px;
  width: 1250px;
  transition-duration: 500ms;
  animation: xx 0.5s ease-out;
}

#BolgTitles {
  position: relative;
  transition-duration: 500ms;
  animation: title 1s ease-out;
}

@keyframes title {
  from {
    opacity: 0;
    left: 20px;
  }
  to {
    opacity: 1;
    left: 0;
  }
}

@keyframes xx {
  from {
    top: 0;
    opacity: 0;
  }
  to {
    top: -60px;
    opacity: 1;
  }

}

.font {
  font-size: 14px;
  color: #dbd8d8;
}

.layoutMain1 {
  text-align: center;
  min-width: 1228px;
}

el-header {
  text-align: center;
}


#ification div {
  margin: 10px 20px;
}

.menu a {
  font-family: 黑体, serif, sans-serif;
  font-weight: 650;
  margin: 0 10px;
  height: 30px;
  text-decoration: none;
  color: white;
  list-style: none;
}

.menus a {
  font-family: 黑体, serif, sans-serif;
  font-weight: 650;
  padding: 0 10px;
  height: 30px;
  text-decoration: none;
  color: #212020;
  list-style: none;
}

.menu a:hover {
  transition-duration: 300ms;
  margin-bottom: 5px;
  color: #4facfe;
}

.menus a:hover {
  transition-duration: 300ms;
  color: #4facfe;
}

.menu {
  line-height: 60px;
  display: flex;
}

.menus {
  border-radius: 5px;
  line-height: 60px;
  background: white;
  color: #1a1919;
  display: flex;
  box-shadow: silver 1px 1px;
}

.footer {
  padding-bottom: 30px;
  padding-top: 30px;
  text-align: center;
  border-top: 1px solid rgba(30, 35, 42, .06);
  box-shadow: 0 4px 10px 10px rgb(0 0 0 / 5%);
  transition: background .6s ease-in-out, padding .6s ease-in-out;
  background: white;
}

.footer p {
  font-size: 14px;
  color: #b9b9b9;
}

.userName {
  color: white;
  text-align: right;
}

.userNames {
  color: #1a1919;
  text-align: right;
}
</style>